<!--热门搜索相对应的列表(点击热门搜索的关键词会出现相对应的列表)-->
<template>
  <scroll ref="suggest"
          class="suggest"
          :data="result"
          :pullup="pullup"
          :beforeScroll="beforeScroll"
          @scrollToEnd="searchMore"
          @beforeScroll="listScroll"
  >
    <ul class="suggest-list">
      <li @click="selectItem(item)" class="suggest-item" v-for="item in result">
        <div class="icon">
          <i :class="getIconCls(item)"></i> <!--小图标-->
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item)"></p>
        </div>
      </li>
      <loading v-show="hasMore" title=""></loading>
    </ul>
    <div v-show="!hasMore && !result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import NoResult from 'base/no-result/no-result'
  import { search } from 'api/search' // 调用数据
  import { ERR_OK } from 'api/config'
  import { createSong } from 'common/js/song' // 歌曲的转换
  import { mapMutations, mapActions } from 'vuex'
  import Singer from 'common/js/singer'

  const TYPE_SINGER = 'singer' // 定义常量存放歌手(方便其他地方使用)
  const perpage = 20 // 默认返回的数据长度

  export default {
    props: {
      showSinger: { // 是否显示歌手
        type: Boolean,
        default: true // 默认为可以展示歌手
      },
      query: { // 检索词(方便外面传值)
        type: String,
        default: ''
      }
    },
    data () {
      return {
        page: 1, // 页面
        pullup: true, // 开启上拉加载
        beforeScroll: true,
        hasMore: true, // 表示有更多的数据
        result: [] // 数据接收
      }
    },
    methods: {
      // 输入框query值发生变化就调用的方法
      search () {
        // 请求服务端，抓取检索词先关的列表数据
        this.page = 1 // 如果改变一次搜索，那么滚动的数据都是从最开始的地方
        this.hasMore = true // 表示是有更多的数据的
        this.$refs.suggest.scrollTo(0, 0) // 如果改变一次搜索，那么滚动的数据都是从最开始的地方
        search(this.query, this.page, this.showSinger, perpage).then((res) => {
          if (res.code === ERR_OK) {
            this.result = this._genResult(res.data)
            this._checkMore(res.data) // 判断数据有没有多余的数据
          }
        })
      },
      // 处理数据 处理是否有zhida的字段（也就是有没有歌手这个字段）
      _genResult (data) {
        let ret = []
        if (data.zhida && data.zhida.singerid) {
          ret.push({...data.zhida, ...{type: TYPE_SINGER}})
        }
        if (data.song) {
          ret = ret.concat(this._normalizeSongs(data.song.list))
        }
        return ret
      },
      // 处理歌曲的数据（根据输入的检索词请求的相对应的数据列表）
      _normalizeSongs (list) {
        let ret = []
        list.forEach((musicData) => {
          if (musicData.songid && musicData.albummid) {
            ret.push(createSong(musicData))
          }
        })
        return ret
      },
      // 歌曲前面的小图标
      getIconCls (item) {
        if (item.type === TYPE_SINGER) {
          return 'icon-mine' // 如果列表出现的是人名就显示一个小的人物icon
        } else {
          return 'icon-music' // 如果列表出现的是歌曲的话就显示一个小的音乐的icon
        }
      },
      // 因为name的数据字段不一样所以要定义一个函数方法
      getDisplayName (item) {
        if (item.type === TYPE_SINGER) {
          return item.singername
        } else {
          return `${item.name}-${item.singer}`
        }
      },
      // 用于父组件调用这个方法
      refresh () {
        this.$refs.suggest.refresh()
      },
      // 上拉加载
      searchMore () {
        if (!this.hasMore) {
          return
        }
        this.page++
        search(this.query, this.page, this.showSinger, perpage).then((res) => {
          if (res.code === ERR_OK) {
            this.result = this.result.concat(this._genResult(res.data))
            this._checkMore(res.data)
          }
        })
      },
      _checkMore (data) {
        const song = data.song // 歌曲的数据
        if (!song.list.length || (song.curnum + song.curpage * perpage) >= song.totalnum) {
          this.hasMore = false
        }
      },
      // 就是在手机端时，当输入时出现了想对应的列表，滑动列表的时候手机端的键盘关闭,派发的事件
      listScroll () {
        this.$emit('listScroll')
      },
      // 点击跳转到子页面
      selectItem (item) {
        if (item.type === TYPE_SINGER) {
          const singer = new Singer({ // 点击歌手名就跳转到歌手详情页面
            id: item.singermid,
            name: item.singername
          })
          this.$router.push({
            path: `/search/${singer.id}`
          })
          this.setSinger(singer)
        } else {
          this.insertSong(item)
        }
        this.$emit('select', item) // 向外部派发事件存放历史记录
      },
      ...mapMutations({
        setSinger: 'SET_SINGER'
      }),
      ...mapActions([
        'insertSong'
      ])
    },
    watch: {
      query (newQuery) { // 监听query值的变化（如果值发生变化就会出现搜索相关的列表）
        this.search(newQuery)
      }
    },
    components: {
      Scroll,
      Loading,
      NoResult
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      padding: 0 30px
      .suggest-item
        display: flex
        align-items: center
        padding-bottom: 20px
      .icon
        flex: 0 0 30px
        width: 30px
        [class^="icon-"]
          font-size: 14px
          color: $color-text-d
      .name
        flex: 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden
        .text
          no-wrap()
    .no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
